<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>{$current['title']}-{$Think.CONFIG.sitename}</title>

    <link href="__PUBLIC__/static/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="__PUBLIC__/static/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="__PUBLIC__/static/css/animate.min.css" rel="stylesheet">
    <include file="Public/commoncss" />

</head>

<body class="gray-bg top-navigation">
<div id="wrapper">
    <div id="page-wrapper" class="gray-bg">
        <div class="row border-bottom white-bg">
            <include file="Public/header" />
        </div>
        <div class="wrapper wrapper-content  animated fadeInRight">
            <div class="row">
                <div class="col-sm-3">
                    <div class="ibox float-e-margins">
                        <include file="Public/setnav" />
                    </div>
                </div>

                <div class="col-sm-9">

                    <div class="ibox ">
                        <div class="ibox-title">
                            <div id="nestable-menu">
                                <form action="{:U('save')}" role="form" id="saveForm">
                                    <button type="button" data-action="expand-all" class="btn btn-white btn-sm">展开所有</button>
                                    <button type="button" data-action="collapse-all" class="btn btn-white btn-sm">收起所有</button>
                                    <button type="button"  class="btn btn-default btn-sm" data-toggle="modal" data-target="#modal-form">新增菜单</button>
                                    <button type="submit"  class="btn btn-info btn-sm" data-container="body" data-toggle="popover" data-placement="top" data-content="排序调整：拖动菜单到指定位置">保存调整</button>
                                    <input type="hidden" name="ids" id="nestable-output">
                                    <span id="saveTips"></span>

                                </form>
                            </div>

                        </div>

                        <div class="ibox-content">
                            <div class="dd" id="nestable">
                                <ol class="dd-list">
                                    <volist name="allmenu" id="v">
                                        <li class="dd-item" data-id="{$v.id}">
                                            <!--一级菜单-->
                                            <empty name="v.children">
                                                <a class="edit-click pull-right" href="javascript:;"  menu-id="{$v.id}" data-toggle="modal" data-target="#edit-form">
                                                    <i class=" fa fa-pencil"></i>
                                                </a>
                                                <div class="dd-handle">
                                                    <span class="label label-{$v.mold|getMenuInfo}" ><i class="fa {$v.icon}"></i></span> {$v.title}
                                                </div>

                                            </empty>
                                            <notempty name="v.children">
                                                <!--一级菜单-->
                                                <a class="edit-click pull-right" href="javascript:;"  menu-id="{$v.id}"  data-toggle="modal" data-target="#edit-form">
                                                    <i class=" fa fa-pencil"></i>
                                                </a>
                                                <div class="dd-handle">
                                                    <span class="label label-{$v.mold|getMenuInfo}"><i class="fa {$v.icon}"></i></span> {$v.title}
                                                </div>
                                                    <notempty name="v.children">
                                                        <ol class="dd-list">
                                                            <volist name="v.children" id="vv">
                                                            <li class="dd-item" data-id="{$vv.id}">
                                                                <!--二级菜单-->
                                                                <a class="edit-click pull-right" href="javascript:;"   menu-id="{$vv.id}"  data-toggle="modal" data-target="#edit-form">
                                                                    <i class=" fa fa-pencil"></i>
                                                                </a>
                                                                <div class="dd-handle">
                                                                    <span class="label label-{$vv.mold|getMenuInfo}"><i class="fa {$vv.icon}"></i></span> {$vv.title}
                                                                </div>
                                                                <notempty name="vv.children">
                                                                    <!--三级菜单-->
                                                                    <empty name="vv.children">
                                                                        <a class="edit-click pull-right" href="javascript:;"   menu-id="{$vv.id}"  data-toggle="modal" data-target="#edit-form">
                                                                            <i class=" fa fa-pencil"></i>
                                                                        </a>
                                                                        <div class="dd-handle">
                                                                            <span class="label label-{$vv.mold|getMenuInfo}"><i class="fa {$vv.icon}"></i></span> {$vv.title}
                                                                        </div>
                                                                    </empty>
                                                                    <notempty name="vv.children">
                                                                        <ol class="dd-list">
                                                                            <volist name="vv.children" id="vvv">
                                                                                <li class="dd-item" data-id="{$vvv.id}">
                                                                                    <a class="edit-click pull-right" href="javascript:;"  menu-id="{$vvv.id}"  data-toggle="modal" data-target="#edit-form">
                                                                                        <i class=" fa fa-pencil"></i>
                                                                                    </a>
                                                                                    <div class="dd-handle">
                                                                                        <!--三级菜单-->
                                                                                        <span class="label label-{$vvv.mold|getMenuInfo}"><i class="fa {$vvv.icon}"></i></span> {$vvv.title}
                                                                                    </div>
                                                                                    <notempty name="vv.children">
                                                                                        <!--四级菜单-->
                                                                                        <empty name="vv.children">
                                                                                            <a class="edit-click pull-right" href="javascript:;"  menu-id="{$vvv.id}"  data-toggle="modal" data-target="#edit-form">
                                                                                                <i class=" fa fa-pencil"></i>
                                                                                            </a>
                                                                                            <div class="dd-handle">
                                                                                                <span class="label label-{$vvv.mold|getMenuInfo}"><i class="fa {$vvv.icon}"></i></span> {$vvv.title}
                                                                                            </div>
                                                                                        </empty>
                                                                                        <notempty name="vvv.children">
                                                                                            <ol class="dd-list">
                                                                                                <foreach name="vvv.children" item="vo">
                                                                                                    <li class="dd-item" data-id="{$vo.id}">
                                                                                                        <a class="edit-click pull-right" href="javascript:;"  menu-id="{$vo.id}"  data-toggle="modal" data-target="#edit-form">
                                                                                                            <i class=" fa fa-pencil"></i>
                                                                                                        </a>
                                                                                                        <div class="dd-handle">
                                                                                                            <!--四级菜单-->
                                                                                                            <span class="label label-{$vo.mold|getMenuInfo}"><i class="fa {$vo.icon}"></i></span> {$vo.title}
                                                                                                        </div>
                                                                                                        <notempty name="vo.children">
                                                                                                            <!--五级菜单-->
                                                                                                            <empty name="vo.children">
                                                                                                                <a class="edit-click pull-right" href="javascript:;" menu-id="{$vo.id}"  data-toggle="modal" data-target="#edit-form">
                                                                                                                    <i class=" fa fa-pencil"></i>
                                                                                                                </a>
                                                                                                                <div class="dd-handle">
                                                                                                                    <span class="label label-{$vo.mold|getMenuInfo}"><i class="fa {$vo.icon}"></i></span> {$vo.title}
                                                                                                                </div>
                                                                                                            </empty>
                                                                                                            <notempty name="vo.children">
                                                                                                                <ol class="dd-list">
                                                                                                                    <foreach name="vo.children" item="vol">
                                                                                                                        <li class="dd-item" data-id="{$vol.id}">
                                                                                                                            <a class="edit-click pull-right" href="javascript:;"  menu-id="{$vol.id}"  data-toggle="modal" data-target="#edit-form">
                                                                                                                                <i class=" fa fa-pencil"></i>
                                                                                                                            </a>
                                                                                                                            <div class="dd-handle">
                                                                                                                                <!--五级菜单-->
                                                                                                                                <span class="label label-{$vol.mold|getMenuInfo}"><i class="fa {$vol.icon}"></i></span> {$vol.title}
                                                                                                                            </div>
                                                                                                                            <notempty name="vol.children">
                                                                                                                                <ol class="dd-list">
                                                                                                                                    <foreach name="vol.children" item="voll">
                                                                                                                                        <li class="dd-item" data-id="{$voll.id}">
                                                                                                                                            <a class="edit-click pull-right" href="javascript:;" menu-id="{$voll.id}"  data-toggle="modal" data-target="#edit-form">
                                                                                                                                                <i class=" fa fa-pencil"></i>
                                                                                                                                            </a>
                                                                                                                                            <div class="dd-handle">
                                                                                                                                                <!--六级菜单-->
                                                                                                                                                <span class="label label-{$vol.mold|getMenuInfo}"><i class="fa {$voll.icon}"></i></span> {$voll.title}
                                                                                                                                            </div>
                                                                                                                                        </li>
                                                                                                                                    </foreach>
                                                                                                                                </ol>
                                                                                                                            </notempty>
                                                                                                                        </li>
                                                                                                                    </foreach>
                                                                                                                </ol>
                                                                                                            </notempty>

                                                                                                        </notempty>
                                                                                                    </li>
                                                                                                </foreach>
                                                                                            </ol>
                                                                                        </notempty>

                                                                                    </notempty>
                                                                                </li>
                                                                            </volist>
                                                                        </ol>
                                                                    </notempty>

                                                                </notempty>
                                                            </li>
                                                            </volist>
                                                        </ol>
                                                    </notempty>

                                            </notempty>
                                        </li>
                                    </volist>
                                </ol>

                            </div>
                            <!--菜单删除部分-->
                            <div class="m-t-md">
                                <h5>拖到此处删除菜单：
                                    <button type="button" class="btn btn-warning pull-right btn-sm" data-toggle="modal" data-target="#delModal"> 删 除 </button>
                                </h5>
                            </div>
                            <div class="dd m-t-md" id="nestable2">
                                <div class="dd-empty"></div>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
        <!--删除提示模态框-->
        <div class="modal inmodal fade" id="delModal" tabindex="-1" role="dialog"  aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <form action="{:U('del')}" role="form" id="delForm">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                            <h4 class="modal-title">友情提示</h4>
                        </div>
                        <div class="modal-body">
                            <p id="delTips">确定删除这些菜单吗？</p>
                        </div>
                        <div class="modal-footer">
                                <input type="hidden" name="ids" id="nestable-output2" value="">
                                <button type="button" class="btn btn-white" data-dismiss="modal">让我想想</button>
                                <button type="submit" class="btn btn-danger btn-sm"> 是的！ </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!--添加窗口-->
        <div id="modal-form" class="modal fade" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="row">
                            <form action="{:U('update')}" role="form" id="myForm">
                                <div>
                                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                                </div>
                                <div class="col-sm-6 b-r">
                                    <h3 class="m-t-none m-b">新增菜单</h3>
                                    <p>欢迎使用本功能！</p>
                                    <div class="form-group">
                                        <label>菜单名称：</label>
                                        <input type="text" name="title" placeholder="名称如：系统设置" class="form-control" datatype="s3-16"  nullmsg="请填写菜单标题名称！" errormsg="菜单标题至少3个字符！" sucmsg="菜单标题验证通过！" autocomplete="off">
                                        <p class="Validform_checktip"></p>
                                    </div>
                                    <div class="form-group">
                                        <label>菜单路径：</label>
                                        <input type="text" name="name" placeholder="链接如：Index/index" class="form-control" datatype="*3-160"  nullmsg="请填写菜单链接！" errormsg="菜单链接至少3个字符！" sucmsg="菜单链接验证通过！" autocomplete="off">
                                        <p class="Validform_checktip"></p>
                                    </div>
                                    <div class="form-group">
                                        <label>菜单图标</label>
                                        <input type="text" name="icon" placeholder="ICON图标" class="form-control"  autocomplete="off">
                                        <p class="Validform_checktip"></p>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <h4>填写菜单信息</h4>
                                    <div class="form-group">
                                        <label>菜单类型：</label>
                                        <select class="form-control m-b" name="mold">
                                            <option value="1">顶部导航菜单</option>
                                            <option value="2">顶部右侧菜单</option>
                                            <option value="3">页面左侧菜单</option>
                                        </select>
                                        <p class="Validform_checktip"></p>
                                    </div>
                                    <div class="form-group">
                                        <label>菜单提示：</label>
                                        <textarea name="tips" id="tips" placeholder="页面提示" class="form-control m-b" rows="3"  style="resize: none;width:100%;"  autocomplete="off"></textarea>
                                        <p class="Validform_checktip"></p>
                                    </div>
                                    <div class="form-group">
                                        <label>显示状态：</label>
                                        <div class="switch">
                                            <div class="onoffswitch">
                                                <input class="onoffswitch-checkbox" id="example2" type="checkbox" name="islink" value="1">
                                                <label class="onoffswitch-label" for="example2">
                                                    <span class="onoffswitch-inner"></span>
                                                    <span class="onoffswitch-switch"></span>
                                                </label>
                                            </div>
                                        </div>
                                        <p class="Validform_checktip"></p>
                                    </div>
                                    <p id="dump"></p>
                                </div>
                                <div class="col-sm-12">
                                    <button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit"><strong>保存配置</strong></button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--编辑窗口-->
        <div id="edit-form" class="modal fade" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="row">
                            <form action="{:U('update')}" role="form" id="editForm">
                                <div>
                                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                                </div>
                                <div class="col-sm-6 b-r">
                                    <h3 class="m-t-none m-b">编辑菜单</h3>
                                    <p>欢迎使用本功能！</p>
                                    <div class="form-group">
                                        <label>菜单名称：</label>
                                        <input type="text" name="title" id="edit-title" placeholder="名称如：系统设置" class="form-control" datatype="*3-16"  nullmsg="请填写菜单标题名称！" errormsg="菜单标题至少3个字符！" sucmsg="菜单标题验证通过！" autocomplete="off">
                                        <p class="Validform_checktip"></p>
                                    </div>
                                    <div class="form-group">
                                        <label>菜单路径：</label>
                                        <input type="text" name="name" id="edit-name" placeholder="链接如：Index/index" class="form-control" datatype="*3-160"  nullmsg="请填写菜单链接！" errormsg="菜单链接至少3个字符！" sucmsg="菜单链接验证通过！" autocomplete="off">
                                        <p class="Validform_checktip"></p>
                                    </div>
                                    <div class="form-group">
                                        <label>菜单图标</label>
                                        <input type="text" name="icon" id="edit-icon" placeholder="ICON图标" class="form-control"  autocomplete="off">
                                        <p class="Validform_checktip"></p>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <h4>填写菜单信息</h4>
                                    <div class="form-group">
                                        <label>菜单类型：</label>
                                        <select class="form-control m-b" name="mold" id="edit-mold">
                                            <option value="1">顶部导航菜单</option>
                                            <option value="2">顶部右侧菜单</option>
                                            <option value="3">页面左侧菜单</option>
                                        </select>
                                        <p class="Validform_checktip"></p>
                                    </div>
                                    <div class="form-group">
                                        <label>菜单提示：</label>
                                        <textarea name="tips" id="edit-tips" placeholder="页面提示" class="form-control m-b" rows="3"  style="resize: none;width:100%;"  autocomplete="off"></textarea>
                                        <p class="Validform_checktip"></p>
                                    </div>
                                    <div class="form-group">
                                        <label>显示状态：</label>
                                        <div class="switch">
                                            <div class="onoffswitch">
                                                <input class="onoffswitch-checkbox" id="edit-islink" type="checkbox" name="islink" value="1" >
                                                <label class="onoffswitch-label" for="edit-islink">
                                                    <span class="onoffswitch-inner"></span>
                                                    <span class="onoffswitch-switch"></span>
                                                </label>
                                            </div>
                                        </div>
                                        <p class="Validform_checktip"></p>
                                    </div>
                                    <p id="editTips"></p>
                                </div>
                                <div class="col-sm-12">
                                    <input type="hidden" name="id" id="edit-id" value="">
                                    <input type="hidden" name="pid" id="edit-pid" value="">
                                    <button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit"><strong>保存配置</strong></button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <include file="Public/footer" />
    </div>
</div>
<include file="Public/commonjs" />
<script src="__PUBLIC__/static/js/bootstrap.min.js?v=3.3.5"></script>
<script src="__PUBLIC__/static/js/content.min.js?v=1.0.0"></script>
<script src="__PUBLIC__/static/js/plugins/nestable/jquery.nestable.js"></script>
<script src="__PUBLIC__/static/js/plugins/validate/Validform_v5.3.2.js"></script>
<script>
    $(document).ready(function() {
        var updateOutput = function(e) {
            var list = e.length ? e : $(e.target),
                    output = list.data("output");
            if (window.JSON) {
                output.val(window.JSON.stringify(list.nestable("serialize")))
            } else {
                output.val("浏览器不支持")
            }
        };
        //菜单画板
        $("#nestable").nestable({
            group: 1
        }).on("change", updateOutput);
        //菜单实时数据
        updateOutput($("#nestable").data("output", $("#nestable-output")));
        $("#nestable-menu").on("click", function(e) {
            var target = $(e.target), action = target.data("action");
            if (action === "expand-all") {
                $(".dd").nestable("expandAll")
            }
            if (action === "collapse-all") {
                $(".dd").nestable("collapseAll")
            }
        })

        //删除画板
        $("#nestable2").nestable({
            group: 1
        }).on("change", updateOutput);
        //菜单实时数据
        updateOutput($("#nestable2").data("output", $("#nestable-output2")));
        //提交表单
        $("#myForm").Validform({
            tiptype:function(msg,o,cssctl){
                if(!o.obj.is("form")){
                    var objtip=o.obj.siblings(".Validform_checktip");
                    cssctl(objtip,o.type);
                    objtip.text(msg);
                }else{
                    if(msg == '恭喜操作成功！'){
                        window.location.reload();
                    }else{
                        var objtip=o.obj.find("#dump");
                        cssctl(objtip,o.type);
                        objtip.text(msg);
                    }
                }
            },
            ajaxPost:true
        });


        //保存菜单调整
        $("#saveForm").Validform({
            tiptype:function(msg,o,cssctl){
                if(!o.obj.is("form")){
                    var objtip=o.obj.find("#saveTips");
                    cssctl(objtip,o.type);
                    objtip.text(msg);
                }else{
                    if(msg == '恭喜操作成功！'){
                        window.location.reload();
                    }else{
                        var objtip=o.obj.find("#saveTips");
                        cssctl(objtip,o.type);
                        objtip.text(msg);
                    }
                }
            },
            ajaxPost:true
        });

        //删除菜单
        $("#delForm").Validform({
            tiptype:function(msg,o,cssctl){
                if(!o.obj.is("form")){
                    var objtip=o.obj.find("#delTips");
                    cssctl(objtip,o.type);
                    objtip.text(msg);
                }else{
                    if(msg == '恭喜操作成功！'){
                        window.location.reload();
                    }else{
                        var objtip=o.obj.find("#delTips");
                        cssctl(objtip,o.type);
                        objtip.text(msg);
                    }
                }
            },
            ajaxPost:true
        });

        //编辑点击事件
        $(document).on("click",".edit-click",function(){
            var menu = $(this).attr("menu-id");
            $.get("{:U('edit')}?id="+menu, function(result){
                if(result.status =='y'){

                    $("#editTips").html(result.info);
                    $("#edit-id").val(result.currentmenu.id);
                    $("#edit-pid").val(result.currentmenu.pid);
                    $("#edit-title").val(result.currentmenu.title);
                    $("#edit-name").val(result.currentmenu.name);
                    $("#edit-icon").val(result.currentmenu.icon);
                    if(result.currentmenu.mold =='1'){
                        $("#edit-mold").find("option[value='1']").attr("selected",true);
                    }else if( result.currentmenu.mold =='2'){
                        $("#edit-mold").find("option[value='2']").attr("selected",true);
                    }else if( result.currentmenu.mold =='3'){
                        $("#edit-mold").find("option[value='3']").attr("selected",true);
                    }
                    $("#edit-tips").val(result.currentmenu.tips);
                    if(result.currentmenu.islink =='1'){
                        if(!$("#edit-islink").is(':checked')){
                            $("#edit-islink").click();
                        }
                    }else{
                        if($("#edit-islink").is(':checked')){
                            $("#edit-islink").click();
                        }
                    }

                }else{
                    $("#editTips").html(result.info);
                }
            });
        })

        //编辑表单
        $("#editForm").Validform({
            tiptype:function(msg,o,cssctl){
                if(!o.obj.is("form")){
                    var objtip=o.obj.siblings(".Validform_checktip");
                    cssctl(objtip,o.type);
                    objtip.text(msg);
                }else{
                    if(msg == '恭喜操作成功！'){
                        window.location.reload();
                    }else{
                        var objtip=o.obj.find("#editTips");
                        cssctl(objtip,o.type);
                        objtip.text(msg);
                    }
                }
            },
            ajaxPost:true
        });
    });
</script>

</body>

</html>